<template>
  <div class="chart" style="height: 220px">
    <Chart style="height: 328px; margin-top: 50px" :option="chartOption" />
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    queryDataChainGrowth,
    DataChainGrowth,
    screenQueryDataChainGrowth,
  } from '@/api/visualization';
  import useChartOption from '@/hooks/chart-option';
  import questionDataSurveyStore from '../../../../store/modules/data-screen';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    quota: {
      type: String,
      default: '',
    },
    chartType: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
    count: {
      type: Number,
      default: 0,
    },
  });
  const { loading, setLoading } = useLoading(true);
  // const count = ref(0);
  const growth = ref(100);
  const isUp = computed(() => growth.value > 50);
  const chartData = ref<any>([]);
  const chartXaxis = ref<any>([]);

  const questionData = questionDataSurveyStore();

  function findaxis() {
    questionData.group.age.forEach((el, idx) => {
      chartXaxis.value.push(el.name);
      chartData.value.push({
        value: el.value,
        itemStyle: {
          color: idx % 2 ? '#468DFF' : '#86DF6C',
        },
      });
    });
  }

  const { chartOption } = useChartOption(() => {
    findaxis();
    return {
      grid: {
        left: '2.6%',
        right: '4',
        top: '40',
        bottom: '40',
      },
      title: {
        text: '用户年龄',
        left: 'center',
      },
      xAxis: {
        type: 'category',
        show: true,
        data: chartXaxis.value,
        // data:["dwdwd"],
      },

      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{b}:   {c}',
      },

      yAxis: {
        type: 'value',
        show: true,
      },

      series: [
        {
          data: chartData.value,
          type: 'bar',
          barWidth: 35,
          barGap: '0',
        },
      ],
    };
  });
</script>

<style scoped lang="less">
  .general-card {
    min-height: 204px;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .percent-text {
    margin-left: 16px;
  }

  .chart {
    width: 100%;
    height: 80px;
    vertical-align: bottom;
  }

  .unit {
    padding-left: 8px;
    font-size: 12px;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>
